<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>致小艮 - 兄弟情贺卡</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/v4-shims.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                        dark: '#1F2937',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        sans: ['Inter', 'PingFang SC', 'Microsoft YaHei', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .glass-effect {
                background: rgba(255, 255, 255, 0.1);
                backdrop-filter: blur(10px);
                border: 1px solid rgba(255, 255, 255, 0.2);
            }
            .floating {
                animation: floating 3s ease-in-out infinite;
            }
            .pulse-slow {
                animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
            .scale-hover {
                transition: transform 0.3s ease;
            }
            .scale-hover:hover {
                transform: scale(1.05);
            }
        }
        
        @keyframes floating {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes slideInLeft {
            from { opacity: 0; transform: translateX(-30px); }
            to { opacity: 1; transform: translateX(0); }
        }
        
        @keyframes slideInRight {
            from { opacity: 0; transform: translateX(30px); }
            to { opacity: 1; transform: translateX(0); }
        }
        
        .fade-in {
            animation: fadeIn 0.8s ease-out forwards;
        }
        
        .slide-in-left {
            animation: slideInLeft 0.6s ease-out forwards;
        }
        
        .slide-in-right {
            animation: slideInRight 0.6s ease-out forwards;
        }
        
        .delay-100 { animation-delay: 0.1s; }
        .delay-200 { animation-delay: 0.2s; }
        .delay-300 { animation-delay: 0.3s; }
        
        /* 自定义滚动条 */
        ::-webkit-scrollbar {
            width: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #3B82F6;
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #2563EB;
        }
        
        /* 背景装饰 */
        .bg-decoration {
            position: fixed;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
            z-index: 0;
        }
        
        .dot {
            position: absolute;
            width: 4px;
            height: 4px;
            background: rgba(59, 130, 246, 0.3);
            border-radius: 50%;
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% {
                transform: translateY(0px) rotate(0deg);
                opacity: 0.7;
            }
            50% {
                transform: translateY(-20px) rotate(180deg);
                opacity: 1;
            }
        }
        
        /* 模态框动画 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
        }
        
        .modal-content {
            background-color: #fff;
            margin: 15% auto;
            padding: 30px;
            border-radius: 15px;
            width: 90%;
            max-width: 500px;
            position: relative;
            animation: modalSlideIn 0.3s ease-out;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }
        
        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-50px) scale(0.9);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            transition: color 0.3s ease;
        }
        
        .close:hover {
            color: #3B82F6;
        }
        
        /* 按钮特效 */
        .btn-effect {
            position: relative;
            overflow: hidden;
        }
        
        .btn-effect::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }
        
        .btn-effect:hover::before {
            width: 300px;
            height: 300px;
        }
        
        /* 音乐播放器样式 */
        .music-player {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 15px;
            padding: 20px;
            color: white;
            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
        }
    </style>
</head>
<body class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-green-50 font-sans">
    <!-- 背景装饰 -->
    <div class="bg-decoration">
        <div class="dot" style="left: 10%; top: 20%; animation-delay: 0s;"></div>
        <div class="dot" style="left: 20%; top: 60%; animation-delay: 1s;"></div>
        <div class="dot" style="left: 80%; top: 30%; animation-delay: 2s;"></div>
        <div class="dot" style="left: 90%; top: 70%; animation-delay: 0.5s;"></div>
        <div class="dot" style="left: 60%; top: 10%; animation-delay: 1.5s;"></div>
        <div class="dot" style="left: 40%; top: 80%; animation-delay: 2.5s;"></div>
    </div>

    <!-- 主容器 -->
    <div class="relative z-10 min-h-screen flex flex-col">
        <!-- 头部 -->
        <header class="text-center py-12 fade-in">
            <div class="container mx-auto px-4">
                <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-dark mb-4">
                    <i class="fas fa-brotherhood text-primary mr-4"></i>
                    致我的兄弟 小艮
                </h1>
                <p class="text-[clamp(1rem,2.5vw,1.25rem)] text-gray-600 max-w-2xl mx-auto leading-relaxed">
                    知道你最近工作很忙，每天都在为了梦想拼搏<br>
                    但记住，身体是革命的本钱。再忙也要照顾好自己
                </p>
            </div>
        </header>

        <!-- 主要内容 -->
        <main class="flex-grow container mx-auto px-4 pb-12">
            <!-- 图片展示区域 -->
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <!-- 第一张图片 -->
                <div class="slide-in-left delay-100">
                    <div class="glass-effect rounded-2xl overflow-hidden shadow-2xl scale-hover">
                        <img src="brother1.jpg" alt="兄弟互相鼓励" class="w-full h-80 object-cover">
                        <div class="p-6 bg-white/90 backdrop-blur-sm">
                            <h3 class="text-xl font-semibold text-dark mb-2">
                                <i class="fas fa-handshake text-secondary mr-2"></i>
                                兄弟同心
                            </h3>
                            <p class="text-gray-600">无论工作多忙，记得家人永远是你的后盾</p>
                        </div>
                    </div>
                </div>

                <!-- 第二张图片 -->
                <div class="slide-in-right delay-200">
                    <div class="glass-effect rounded-2xl overflow-hidden shadow-2xl scale-hover">
                        <img src="brother2.jpg" alt="工作再忙也要休息" class="w-full h-80 object-cover">
                        <div class="p-6 bg-white/90 backdrop-blur-sm">
                            <h3 class="text-xl font-semibold text-dark mb-2">
                                <i class="fas fa-moon text-accent mr-2"></i>
                                劳逸结合
                            </h3>
                            <p class="text-gray-600">忙碌的工作之余，记得给自己一些休息的时间</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 音乐播放器区域 -->
            <div class="text-center mb-12 fade-in delay-300">
                <div class="max-w-md mx-auto">
                    <h2 class="text-2xl font-bold text-dark mb-6">
                        <i class="fas fa-music text-primary mr-3"></i>
                        你的专属歌单
                    </h2>
                    <div class="music-player">
                        <!-- 网易云音乐播放器 -->
                        <iframe 
                            frameborder="no" 
                            border="0" 
                            marginwidth="0" 
                            marginheight="0" 
                            width="100%" 
                            height="150" 
                            src="https://music.163.com/outchain/player?type=0&id=13079868719&auto=0&height=150"
                            class="rounded-lg"
                        ></iframe>
                        <p class="text-sm mt-3 opacity-90">点击播放按钮，听听你熟悉的音乐</p>
                    </div>
                </div>
            </div>

            <!-- 按钮区域 -->
            <div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12 fade-in delay-300">
                <button onclick="showEncouragement()" class="btn-effect bg-primary hover:bg-blue-600 text-white px-8 py-4 rounded-full font-semibold text-lg transition-all duration-300 shadow-lg hover:shadow-xl scale-hover">
                    <i class="fas fa-heart mr-2"></i>
                    接收我的鼓励
                </button>
                <button onclick="showBeer()" class="btn-effect bg-secondary hover:bg-green-600 text-white px-8 py-4 rounded-full font-semibold text-lg transition-all duration-300 shadow-lg hover:shadow-xl scale-hover">
                    <i class="fas fa-beer mr-2"></i>
                    来杯虚拟啤酒
                </button>
            </div>

            <!-- 健康提醒 -->
            <div class="max-w-4xl mx-auto bg-white/80 backdrop-blur-sm rounded-2xl p-8 shadow-xl fade-in delay-300">
                <h2 class="text-2xl font-bold text-dark mb-6 text-center">
                    <i class="fas fa-bullseye text-secondary mr-3"></i>
                    兄弟的健康提醒
                </h2>
                <div class="grid md:grid-cols-2 gap-6">
                    <div class="flex items-start space-x-4">
                        <div class="bg-primary/10 p-3 rounded-full">
                            <i class="fas fa-utensils text-primary text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-dark mb-2">按时吃饭</h3>
                            <p class="text-gray-600 text-sm">无论工作多忙，一定要按时吃饭，保证营养均衡</p>
                        </div>
                    </div>
                    <div class="flex items-start space-x-4">
                        <div class="bg-secondary/10 p-3 rounded-full">
                            <i class="fas fa-bed text-secondary text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-dark mb-2">早点休息</h3>
                            <p class="text-gray-600 text-sm">不要熬夜太晚，充足的睡眠是第二天工作的保障</p>
                        </div>
                    </div>
                    <div class="flex items-start space-x-4">
                        <div class="bg-accent/10 p-3 rounded-full">
                            <i class="fas fa-tint text-accent text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-dark mb-2">多喝水</h3>
                            <p class="text-gray-600 text-sm">工作再忙，也要记得喝水，保持水分充足</p>
                        </div>
                    </div>
                    <div class="flex items-start space-x-4">
                        <div class="bg-red-100 p-3 rounded-full">
                            <i class="fas fa-walking text-red-500 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-dark mb-2">适当运动</h3>
                            <p class="text-gray-600 text-sm">每工作1小时，站起来活动5分钟，保持身体健康</p>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- 底部署名 -->
        <footer class="bg-dark text-white py-8">
            <div class="container mx-auto px-4 text-center">
                <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 max-w-md mx-auto">
                    <div class="flex items-center justify-center space-x-3 mb-3">
                        <i class="fas fa-handshake text-primary text-2xl"></i>
                        <span class="text-xl font-semibold">你的兄弟</span>
                    </div>
                    <p class="text-2xl font-bold text-primary mb-2">意-于风</p>
                    <p class="text-gray-300 text-sm">2025年9月19日</p>
                </div>
            </div>
        </footer>
    </div>

    <!-- 模态框 -->
    <div id="encouragementModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <div id="modalContent" class="text-center">
                <!-- 动态内容将在这里插入 -->
            </div>
        </div>
    </div>

    <script>
        // 鼓励话语数组
        const encouragements = [
            "小艮，你是最棒的！我相信你一定能够克服所有困难！",
            "工作再忙也要记得休息，身体是革命的本钱！",
            "无论遇到什么问题，记住你不是一个人在战斗，我永远支持你！",
            "加油！你的努力一定会有回报的，我为你感到骄傲！",
            "累了就歇歇，家人永远是你最坚实的后盾！",
            "相信自己，你拥有无限的潜力！",
            "每一次的努力都是在为未来的成功积累，继续加油！",
            "小艮，你真的很优秀，不要给自己太大压力！",
            "记住要照顾好自己，我还等着和你一起喝酒呢！",
            "你的坚持和努力让我很感动，继续保持！"
        ];

        // 啤酒消息数组
        const beerMessages = [
            "干杯！小艮，辛苦了！这杯我敬你！",
            "来，干了这杯虚拟啤酒，放松一下！",
            "啤酒虽好，可不要贪杯哦！明天还要继续奋斗！",
            "cheers！为我们的兄弟情，也为你的努力！",
            "这杯啤酒代表我对你的支持，兄弟加油！"
        ];

        // 获取模态框元素
        const modal = document.getElementById('encouragementModal');
        const modalContent = document.getElementById('modalContent');
        const span = document.getElementsByClassName('close')[0];

        // 显示鼓励消息
        function showEncouragement() {
            const randomEncouragement = encouragements[Math.floor(Math.random() * encouragements.length)];
            modalContent.innerHTML = `
                <div class="text-center">
                    <div class="bg-primary/10 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-heart text-primary text-3xl"></i>
                    </div>
                    <h2 class="text-2xl font-bold text-dark mb-4">兄弟的鼓励</h2>
                    <p class="text-lg text-gray-700 leading-relaxed">${randomEncouragement}</p>
                </div>
            `;
            modal.style.display = 'block';
            // createHearts();
        }

        // 显示啤酒消息
        function showBeer() {
            const randomBeerMessage = beerMessages[Math.floor(Math.random() * beerMessages.length)];
            modalContent.innerHTML = `
                <div class="text-center">
                    <div class="bg-secondary/10 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-beer text-secondary text-3xl"></i>
                    </div>
                    <h2 class="text-2xl font-bold text-dark mb-4">虚拟啤酒时间</h2>
                    <p class="text-lg text-gray-700 leading-relaxed">${randomBeerMessage}</p>
                    <div class="mt-4 text-4xl">🍻</div>
                </div>
            `;
            modal.style.display = 'block';
        }

        // 关闭模态框
        span.onclick = function() {
            modal.style.display = 'none';
        }

        // 点击模态框外部关闭
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = 'none';
            }
        }

        // 创建爱心特效
        function createHearts() {
            for (let i = 0; i < 5; i++) {
                setTimeout(() => {
                    const heart = document.createElement('div');
                    heart.innerHTML = '❤️';
                    heart.style.position = 'fixed';
                    heart.style.left = Math.random() * 100 + 'vw';
                    heart.style.top = '100vh';
                    heart.style.fontSize = '20px';
                    heart.style.pointerEvents = 'none';
                    heart.style.zIndex = '1001';
                    heart.style.animation = `fall ${3 + Math.random() * 2}s linear forwards`;
                    document.body.appendChild(heart);

                    setTimeout(() => {
                        heart.remove();
                    }, 5000);
                }, i * 200);
            }
        }

        // 添加下落动画
        const style = document.createElement('style');
        style.textContent = `
            @keyframes fall {
                to {
                    transform: translateY(-100vh) rotate(360deg);
                    opacity: 0;
                }
            }
        `;
        document.head.appendChild(style);

        // 键盘快捷键
        document.addEventListener('keydown', function(event) {
            if (event.code === 'Space') {
                event.preventDefault();
                showEncouragement();
            } else if (event.code === 'Enter') {
                event.preventDefault();
                showBeer();
            }
        });

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 添加滚动时的动画效果
            const observerOptions = {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            };

            const observer = new IntersectionObserver(function(entries) {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = '1';
                        entry.target.style.transform = 'translateY(0)';
                    }
                });
            }, observerOptions);

            // 观察所有需要动画的元素
            document.querySelectorAll('.fade-in, .slide-in-left, .slide-in-right').forEach(el => {
                el.style.opacity = '0';
                el.style.transform = 'translateY(20px)';
                el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
                observer.observe(el);
            });
        });

        // 音乐播放器加载完成后的提示
        window.addEventListener('load', function() {
            setTimeout(() => {
                console.log('音乐播放器已加载完成');
            }, 2000);
        });
    </script>
</body>
</html>